<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动表格</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            text-align: center;
            background-color: #80808059;
        }

        #box1 {
            display: inline-block;
            text-align: left;
        }

        #box1 table {
            border-collapse: collapse;
            border: 1px solid;
            text-align: center;
            margin: auto;
            margin-top: 20px;
            width: 800px;
        }

        #box1 td,
        #box1 th {
            border: 1px solid;
            height: 50px;
        }

        #box1 tbody>tr>td:nth-of-type(5) {
            width: 200px;
        }

        #box1 tbody>tr>td:nth-of-type(5) span {
            font-size: 12px;
            border: 1px solid;
            margin: 5px;
            padding: 3px;
            cursor: pointer;
            background-color: #80808059;
        }

        #box2 {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffffff;
            display: none;
        }

        #box2 table {
            border-collapse: collapse;
            width: 800px;
        }


        #box2 td,
        #box2 th {
            border: 1px solid;
            height: 30px;
        }

        input {
            border: 1px solid;
            border-radius: 5px;
            vertical-align: middle;
            line-height: 20px;
        }

        select {
            border: 1px solid;
            height: 20px;
            border-radius: 5px;
        }

        #box2>span {
            border: 1px solid;
            background-color: grey;
            color: white;
            cursor: pointer;
            display: inline-block;
            margin-top: 10px;
            padding: 3px;
        }
    </style>
</head>

<body>
    <div id="box1">
        <button>新增一行</button>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <!-- <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
            </tbody> -->
        </table>

    </div>
    <div id="box2">
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" id="id">
                    </td>
                    <td>
                        <input type="text" id="name">
                    </td>
                    <td>
                        <select id="sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" id="age">
                    </td>
                </tr>
            </tbody>
        </table>
        <span id="sure">确定</span>
        <span id="cancel">取消</span>
    </div>
</body>
<script>
    let CreateTr = document.querySelector('#box1>button');
    let box1 = document.getElementById('#box1');
    let tableShow = document.querySelector('#box1>table');
    let sure = document.querySelector('#sure');
    let cancel = document.querySelector('#cancel');
    let id = document.querySelector('#id');
    let name = document.querySelector('#name');
    let sex = document.querySelector('#sex');
    let age = document.querySelector('#age');
    let box2 = document.querySelector ('#box2');

    let data = [
        { id: '001', name: '鲁班', nex: '女', age: 18 },
        { id: '002', name: '亚瑟', nex: '男', age: 19 },
        { id: '003', name: '凯皇', nex: '女', age: 28 },
        { id: '004', name: '李白', nex: '男', age: 15 },
        { id: '005', name: '高渐离', nex: '女', age: 25 }
    ]

    show();
    //刚开始的页面渲染
    function show() {
        let frg = document.createDocumentFragment();
        let tbody = document.createElement('tbody');
        let num = 0;
        for (let i = 0; i < data.length; i++) {
            let tr = document.createElement('tr');
            tr.setAttribute('data-idx', num);//此处设置自定义属性是为了更好的上移和下移;
            for (let key in data[i]) {
                let td = document.createElement('td');
                td.innerHTML = data[i][key];
                tr.appendChild(td);
            }
            let lastTd = document.createElement('td');
            lastTd.innerHTML = `<span class = "upward">向上移动</span><span class = "downward">向下移动</span><span class = "delete">删除</span>`;
            tr.appendChild(lastTd);
            tbody.appendChild(tr);
            num++;
        }
        frg.appendChild(tbody);
        tableShow.appendChild(frg);
    }

    //功能
    tableShow.onclick = function (e) {
        e = e || window.event;
        let target = e.target || e.srcElement;
        if (target.className == 'upward' || target.className == 'downward' || target.className == 'delete') {
            let tbody = document.querySelector('#box1 tbody');
            tbody.remove();

            //向上移动功能;
            if (target.className == 'upward') {
                let idx = target.parentNode.parentNode.getAttribute('data-idx');
                for (let i = 0; i < data.length; i++) {
                    if (i == idx && i != 0) {
                        let temp = data[i - 1];
                        data[i - 1] = data[i];
                        data[i] = temp;
                        break;
                    } else if (0 == idx) {
                        alert('该行已经是第一行');
                        break;
                    }
                }
            }

            //向下移动功能;
            if (target.className == 'downward') {
                let idx = target.parentNode.parentNode.getAttribute('data-idx');
                for (let i = 0; i < data.length; i++) {
                    if (i == idx && i != data.length - 1) {
                        let temp = data[i + 1];
                        data[i + 1] = data[i];
                        data[i] = temp;
                        break;
                    } else if (data.length - 1 == idx) {
                        alert('该行已经是最后一行');
                        break;
                    }
                }
            }

            //删除功能;
            if (target.className == 'delete') {
                let res = confirm('是否确认删除');
                if (res) {
                    let idx = target.parentNode.parentNode.getAttribute('data-idx');
                    for (let i = 0; i < data.length; i++) {
                        if (i == idx) data.splice(i, 1);
                    }
                }
            }
            show();
        }
    }

    //添加信息功能
    CreateTr.onclick = () => box2.style.display = 'block';
    cancel.onclick = () => box2.style.display = 'none';
    sure.onclick = function () {
        let tbody = document.querySelector('#box1 tbody');
        let newObj = {};
        tbody.remove();
        newObj.id = id.value;
        newObj.name = name.value;
        newObj.sex = sex.value;
        newObj.age = age.value;
        data.push(newObj);
        show();
        box2.style.display = 'none';
        id.value = name.value = age.value = '';
    }

    

</script>

</html>